<template>
	<div class="container-all me-order">
		<div v-show="noOrder" class="noOrder">
			<img :class=" iserror ? 'errororder':'noorder'" :src="iserror ? 'https://zafgoos.oss-cn-shanghai.aliyuncs.com/hbplus/imgs/error.png':'https://zafgoos.oss-cn-shanghai.aliyuncs.com/hbplus/imgs/noorder.png'" />
  			<div style='font-size:.24rem;text-align: center'>您目前没有订单</div>
		</div>
		<div v-show="!noOrder"  id="mescroll" class="mescroll" style="height: 100%;">
			<div class='top-tips'>
			    <img src='http://zafgoos.oss-cn-shanghai.aliyuncs.com/hbplus/imgs/!.png'>
			    <span>{{settingValue}}</span>
			</div>
			<div>
				<div class="order-list" v-for="(item, index) in orders" :class="[index != 0?'margin-t':'']" @click="orderDetail(item)">
					<div class="left-img left">
						<img class="left-img-in" v-lazy='item.attaUrl'/>
					</div>
					<div class="right-p">
						<div class="list-first flex">
							<span class="goods-name ecs">{{item.goodsName}}</span>
							<span class="right-p-state">{{item.stateEnum}}</span>
						</div>
						<div class="list-sec ecs">规格：{{item.goodsNorm}}</div>
						<div class="list-third flex">
							<span>价格：￥{{item.price|fixedTwo}}</span>
							<span>{{item.counts}}件</span>
						</div>
					</div>
				</div>
			</div>
			
		</div>
	</div>
</template>
<script>
	import MeScroll from 'mescroll'
	import http from '@/util/http'
	import Api from '@/util/api'
	import utils from '@/util/util'
	export default {
		data () {
			return {
				settingValueOld: '',
				settingValue: '',
				orders: [],
				noOrder: false,
				iserror: false,
				pageNum: 1
			}
		}
		,created: function() {
			this.$vux.loading.show({
			 text: 'Loading'
			});
			http.post(Api.settingQueryOneByCode,{settingCode: "OrderTips"}).then(res => {
				this.settingValueOld = res.data.settingValue;
			})
			http.post(Api.orderListUserOrders,

			{numPerPage: 7, order: "desc", pageNum: 1, userId:utils.getUserInfo()&&utils.getUserInfo().user.id}).then(res => {

				this.$vux.loading.hide();
				if (res.code == 200) {
					if (res.data.rows.length < 1) {
						this.noOrder = true;
					} else{
						this.orders = res.data.rows;
						this.settingValue = this.settingValueOld;
					}
				} else{
					this.toast(res.message)
				}
			})
		}
		,mounted: function() {
				var self = this;
				self.mescroll = new MeScroll("mescroll", { 
					down: {
						callback: self.downCallback //下拉刷新的回调,别写成downCallback(),多了括号就自动执行方法了
					},
					up: {
						callback: self.upCallback , //上拉加载的回调
						isBounce: true //如果您的项目是在iOS的微信,QQ,Safari等浏览器访问的,建议配置此项.解析(必读)
						,offset: 50
					}
				});
		}
		,methods: {
			orderDetail(item) {
				this.$router.push("/order-info?id="+item.id);
			}
			,downCallback () {
				console.log('down')
				http.post(Api.orderListUserOrders,{numPerPage: 7, order: "desc", pageNum: 1, userId: utils.getUserInfo()&&utils.getUserInfo().user.id}).then(res => {

					if (res.code == 200) {
						this.pageNum=1;
						let self = this;
						
						this.orders = res.data.rows;
						this.mescroll.endDownScroll(false);
						if(this.orders.length == res.data.total) {
							this.mescroll.endUpScroll(true);
							setTimeout(function() {
								self.mescroll.lockUpScroll();
							}, 500)

							return;
						}
						this.mescroll.endUpScroll(false);
						this.mescroll.lockUpScroll(false);
					}else{
						this.toast(res.message)
					}
				})
			}
			,upCallback (page) {
				this.pageNum++;
				http.post(Api.orderListUserOrders,{numPerPage: 7, order: "desc", pageNum: this.pageNum, userId: utils.getUserInfo()&&utils.getUserInfo().user.id}).then(res => {
					console.log(res);
					if (res.code == 200) {
						this.orders = [...this.orders, ...res.data.rows];
						this.mescroll.endUpScroll(false)
						if(this.orders.length == res.data.total) {
							this.mescroll.endUpScroll(true);
							this.mescroll.lockUpScroll();
						}
					}else{
						this.toast(res.message)
					}
				})
			}
		}
		,filters: {
			fixedTwo(price) {
				if(price) {
					return Number(price / 100).toFixed(2);
				}
				return "0.00";
			}

		}
	}
</script>

<style lang="less" rel="stylesheet/less">
	@import '../../assets/css/mescroll.min.css';
	.margin-t{margin-top: .18rem;}
	.noorder{
		width: 2.29rem;
		height:2.46rem;
		margin-left: 2.6rem;
		margin-top: 30%;
	}  
	.errororder{
	  width: 3.75rem;
	  height:3.75rem;
	  margin-top: 30%;
	  margin-left: 1.88rem;
	}
	.me-order{
		background: #F2F2F2;
		height: 100%;
		min-height: 100%;
		.mescroll{
			height: 100%;
		}
		.top-tips{
		  width: 6.9rem;
		  padding-left: .3rem;
		  display:flex;
		  position: relative;
		}
		.top-tips img{
		  top:.2rem;
		  position: absolute;
		  height: .3rem;
		  width: .3rem;
		}
		.top-tips span{
		  padding: .2rem 0;
		  margin-left: .5rem;
		  font-size: .2rem;
		  color: #909090;
		}
		.order-list{
			height: 1.32rem;
			background: #FFFFFF;
			padding: .3rem;
			.left-img{
				width: 1.32rem;
				height: 1.32rem;
				border: 1px solid #E6E6E6;
				border-radius: .06rem;
				position: relative;
				img{
					width: 1.32rem;
					height: 1.32rem;
					position: absolute;
					top: 0;
					left: 0;
					bottom: 0;
					right: 0;
					margin: auto;
				}
			}
			.right-p{
				margin-left: 1.62rem;
				height: .4rem;
				color: #464646;
				font-size: .32rem;
			}
			.list-first,.list-third{
				justify-content: space-between;
			}
			.right-p-state{
				color:#FF4C5D
			}
			.list-sec,.list-third{
				font-size: .28rem;
				color: #909090;
			}
			.ecs{
				padding: 0;
			}
			.goods-name{
				display: inline-block;
				width: 4rem;
				white-space: nowrap; 
				text-overflow: ellipsis;
			}
			.list-sec{
				margin-top: .07rem;
			}
			.list-third{
				margin-top: .12rem;
			}
		}
	}
</style>